<p>header works!</p>
<h1>{{name}}</h1>
<!-- 绑定属性 静态数据 -->
<div title="hello">
  hello1
</div>
<!-- 绑定属性 动态数据 -->
<div [title] = 'name'>
  hello2
</div>

<!-- 无法解析html代码 -->
<div>{{content}}</div>
<!-- 使用innerHTML来绑定html标签 -->
<div [innerHTML] = 'content'></div>

<!-- 遍历数组ngFor -->
<ul>
  <li *ngFor = 'let item of arr;let i = index;'>
    {{item}}---{{i}}
  </li>
</ul>
<!-- 嵌套遍历 -->
<ul>
  <li *ngFor = "let item of arr1;let i = index;">
    {{item.brand}}---{{i}}
    <ul>
      <li *ngFor = 'let list of item.list;let i = index' >
        {{list.name}}---{{list.price}}---{{i}}
      </li>
    </ul>
  </li>
</ul>

<!-- 引入图片 -->
<!-- 本地图片 不需要../和./ 直接写assets -->
<img src="assets/images/xiaoji.jpg" alt="">

<img src="http://hbimg.b0.upaiyun.com/d550becdf6df15bbc56d9f75640ba528a63716ee10637-06vB9h_fw658" alt="">
<!-- 绑定属性 -->
<img [src]='imageUrl' alt="">

<!--ngIf  -->
<!-- ngIf 引用数据要加引号 -->
<div>
  <span *ngIf="flag" class="red">123</span>
  <span *ngIf="!flag" class="blue">123</span>
</div>

<!-- ngSwitch 条件判断语句  -->
<div [ngSwitch]="getStatus">
  <!-- ngSwitchCase -->
<p *ngSwitchCase="1" class="red">
  请求成功
</p>
<p *ngSwitchCase="0" class="red">
  请求失败
</p>
<!-- ngSwitchDefault -->
<p *ngSwitchDefault class="red">
  未知错误
</p>
</div>

<!-- ngClass -->
<!-- true和false可以不加引号 -->
<div [ngClass] = "{'red': true,'blue':false}">
  ngClass
</div>
<!-- 数据可以不加引号 -->
<div [ngClass] ="{'red': flag,'blue':!flag}">
  动态ngClass
</div>

<ul>
    <li *ngFor = 'let item of arr;let i = index;' [ngClass]="{'red': i===0,'blue':i!==0}">
      {{item}}---{{i}}
    </li>
  </ul>

<hr />
<p style="color: aqua">使用内联式的style</p>

<!-- ngStyle -->
<!-- 动态样式 -->
<p [ngStyle]= "{'color': color}">使用ngstyle的样式</p>

<hr />
<!-- 管道 给数据进行格式化的一些方法 -->
<p>{{now | date:'yyyy-MM-dd HH:mm:ss' }}</p>

<hr />
<!-- 事件执行 -->
{{name}}
<button (click)="run()">按钮</button>
<button (click)="getData()">获取数据</button>
<button (click)="setData()">修改数据</button>
<hr />
<!-- 表单事件 -->
<input type="text" (keyup)="keyUpFn($event)"/>
<hr />


<!-- 双向数据绑定 MVVM -->
<!-- 重点 -->
<input type="text" [(ngModel)]="keyword"><br />
<p>{{keyword}}</p>
